import React, { useState } from 'react';
import axios from 'axios'
// 引入样式
import '../../../scss/lhq/credit.scss'
// 表单
import { Button, Form, Input, Select } from 'antd';
// 日期
import { DatePicker, Space } from 'antd';
// icon
import { SearchOutlined, PlusCircleOutlined, StopOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
// 导入表格
import Mytable from '../Package/Mytable'
// 退货单请求
import { useCredit } from '../../../hooks/lhqHooks/index'
// api
import { credit_search, credit_del, credit_add } from '../../../tools/lhq/api'
import  Mymodal  from '../Package/Mymodal'
// 导入骨架屏
import Skeletons from '../../../components/skeleton/Skeletons'

function Credit(props) {
    // 让组件更新
    const shoAi = () => {
        axios.get('http://localhost:4000/credit').then(
            res => {
                setCredit(res.data)
            }
        )
    }
    // 时间
    var [date,setDate] = useState()
    // 退货单管理
    var [credit, setCredit] = useCredit([])
    // 表单 模糊搜索
    const onFinish = (values) => {
        credit_search(values.status).then((res)=>{
            setCredit(res.data)
        })
    };
    // 日期
    const onChange = (date, dateString) => {
        setDate(dateString)
    };

    // 表格
    const columns = [
        {
            title: '发起日期',
            dataIndex: 'fdate',
            key: 1,
            align:"center"
        },
        {
            title: '退货日期',
            dataIndex: 'tdate',
            key: 2,
            align: "center"
        },
        {
            title: '退货单号',
            dataIndex: 'number',
            key: 3,
            align: "center"
        },
        {
            title: '退货单状态',
            dataIndex: 'status',
            key: 4,
            align: "center"
        },
        {
            title: '供应商名称',
            dataIndex: 'name',
            key: 5,
            align: "center"
        },
        {
            title: '发起人',
            dataIndex: 'person',
            key: 6,
            align: "center"
        },
        {
            title: '退货仓库',
            dataIndex: 'store',
            key: 7,
            align: "center"
        },
        {
            title: '退货方式',
            dataIndex: 'way',
            key: 8,
            align: "center"
        },
        {
            title: '退货联系人',
            dataIndex: 'touch',
            key: 9,
            align: "center"
        },
        {
            title: 'Action',
            key: 10,
            render: (_, record) => (
                <>
                    <Button size='small' style={{ backgroundColor: 'coral', color: '#fff' }} onClick={() => { del(record) }}><DeleteOutlined /></Button>
                </>
            ),
        },
    ];

    // 删除
    const del = (record) => {
        credit_del(record.id).then((res) => {
            setCredit(res.data.list)
            shoAi()
        })
    }

    // 新增
    const [isModalOpen, setIsModalOpen] = useState(false);
    var add = (value) => {
        setIsModalOpen(true);
    }
    var onFinish1 = (values) => {
        setDate(date)
        console.log("时间",date)
        setIsModalOpen(false);
        // 发请求 新增
        credit_add({fdate:date,tdate:date,number:values.number,status:values.status,
        name:values.name,person:values.person,store:values.store,way:values.way,touch:values.touch,key:credit.length+1}).then((res) => {
            setCredit(res.data.list)
            shoAi()
        })
    }
    // 对话框属性方法 传递
    const data = {
        isModalOpen: isModalOpen,
        form: (
            <Form className='form' initialValues={{ remember: true }} onFinish={onFinish1} 
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 18 }}
            >
                <Form.Item className='item' label="发起日期" name="fdate">
                    <Space direction="vertical">
                        <DatePicker onChange={onChange} />
                    </Space>
                </Form.Item>
                <Form.Item className='item' label="退货日期" name="tdate">
                    <Space direction="vertical">
                        <DatePicker onChange={onChange} />
                    </Space>
                </Form.Item>
                <Form.Item className='item' label="退货单号" name="number">
                    <Input placeholder='请输入退货单号' />
                </Form.Item>
                <Form.Item className='item' label="退货单状态" name="status">
                    <Select
                        placeholder="全部"
                        style={{ width: 120 }}
                        options={[
                            { value: '全部' },
                            { value: '待分配' },
                            { value: '待审核' }
                        ]}
                    />
                </Form.Item>
                <Form.Item className='item' label="供应商名称" name="name">
                    <Input placeholder='请输入供应商' />
                </Form.Item>
                <Form.Item className='item' label="发起人" name="person">
                    <Input placeholder='请输入退货发起人' />
                </Form.Item>
                <Form.Item className='item' label="退货仓库" name="store">
                    <Input placeholder='请输入退货仓库' />
                </Form.Item>
                <Form.Item className='item' label="退货方式" name="way">
                    <Input placeholder='请输入退货方式' />
                </Form.Item>
                <Form.Item className='item' label="退货联系人" name="touch">
                    <Input placeholder='请输入退货联系人' />
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 6, span: 18 }}>
                    <Button type="primary" htmlType="submit">保存</Button>
                </Form.Item>
            </Form>
        ),
        title: '新增采购单',
    }

    var dataSource = {
        arr: credit,
        visble: 0
    }

    return (
        <div className='credit'>
            <div className="top">
                <Form className='form' initialValues={{ remember: true }} onFinish={onFinish}>
                    <Form.Item className='item' label="退货单状态" name="status">
                        <Select
                            placeholder="全部"
                            style={{ width: 120 }}
                            options={[
                                { value: '全部' },
                                { value: '待分配' },
                                { value: '待审核' }
                            ]}
                        />
                    </Form.Item>
                    <Form.Item className='item' label="发起日期" name="date">
                        <Space direction="vertical">
                            <DatePicker onChange={onChange} />
                        </Space>
                    </Form.Item>
                    <Form.Item className='item' label="供应商名称" name="name">
                        <Input placeholder='请输入供应商名称' />
                    </Form.Item>
                    <Form.Item className='item' label="退货仓库" name="store">
                        <Input placeholder='请选择退货仓库' />
                    </Form.Item>
                    <Button className='btn' type="primary" icon={<SearchOutlined />} htmlType="submit">搜索</Button>
                    <Button className='btn' style={{ backgroundColor: 'coral', color: '#fff' }} icon={< PlusCircleOutlined />} onClick={add}>添加</Button>
                    <Button className='btn' style={{ backgroundColor: 'lightseagreen', color: '#fff' }} icon={<StopOutlined />}>终止</Button>
                </Form>
            </div>
            {/* 表格 */}
            {
                credit && credit.length == 0 ?
                <Skeletons /> :
                    < Mytable dataSource={dataSource} columns={columns}/>
            }
            {/* 对话框 */}
            <Mymodal data={data} ></Mymodal>
        </div>
    );
}

export default Credit;